import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
import _isFunction from "lodash/isFunction";
import _map from "lodash/map";
import _isNaN from "lodash/isNaN";
import _forEach from "lodash/forEach";

/**
 * @file index.js
 * @description 将 activeField swapField addField(Field) 给 wrapperFieldComponent 调用
 * removeField 由 CellControl 调用
 * @date 2018/10/11
 */
import React from 'react';
import { Pane, SortablePane } from 'react-sortable-pane';
import { Pagination } from 'antd';
import intl from 'utils/intl';
import { totalRender } from 'utils/renderer';
import { autoSizeWidth } from "../../../config";
import DrawDragComponent from "../../Drag/DrawDragComponent";
import DropField from "../../Drop/DropField";
import Col from "./Col";
import styles from "../../index.less?modules"; // 一次最大能增加的长度

var maxFieldWidth = 500;
var fieldHeight = 46;
var resizeLayoutHeight = fieldHeight + 2;
var noResizable = {
  resizable: {
    x: false,
    y: false,
    xy: false
  }
};
var defaultPagination = {
  showSizeChanger: true,
  pageSizeOptions: ['10', '20', '50', '100'],
  total: 100,
  showTotal: totalRender
};
var dynamicTableStyleWithNoPagination = {
  height: 166
};
var dynamicTableStyleWithPagination = {
  height: 200
}; // TableRender 可以直接拖进 新增的字段

var DynamicTableRender = /*#__PURE__*/function (_React$Component) {
  _inherits(DynamicTableRender, _React$Component);

  var _super = _createSuper(DynamicTableRender);

  function DynamicTableRender(props) {
    var _this;

    _classCallCheck(this, DynamicTableRender);

    _this = _super.call(this, props);
    _this.state = {
      originKeyMapIndex: {},
      // 字段原始的顺序 key 对应的 index
      // prevRenderKey: '', // 原来的 render key
      orderKeys: [],
      // 字段的顺序
      originWidth: 0,
      // resize field 开始时的宽度
      // resizingWidth: 0, // field resizing 时的宽度
      paginationProps: _objectSpread({}, defaultPagination) // 分页的信息

    };
    _this.sortableResize = {
      grid: [5],
      resizable: {
        x: true
      },
      minWidth: 60,
      maxWidth: 200
    };
    _this.wrapperFieldComponent = _this.wrapperFieldComponent.bind(_assertThisInitialized(_this));
    _this.orderChange = _this.orderChange.bind(_assertThisInitialized(_this));
    _this.changeViewWidthStart = _this.changeViewWidthStart.bind(_assertThisInitialized(_this));
    _this.changeViewWidth = _this.changeViewWidth.bind(_assertThisInitialized(_this));
    _this.changeViewWidthStop = _this.changeViewWidthStop.bind(_assertThisInitialized(_this));
    _this.getSortableResizeConfig = _this.getSortableResizeConfig.bind(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(DynamicTableRender, [{
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props = this.props,
          component = _this$props.component,
          onRemoveField = _this$props.onRemoveField,
          onAddField = _this$props.onAddField,
          onAddComponent = _this$props.onAddComponent,
          onActiveComponent = _this$props.onActiveComponent,
          onSwapComponent = _this$props.onSwapComponent,
          currentEditComponent = _this$props.currentEditComponent,
          currentEditField = _this$props.currentEditField;
      var _this$state = this.state,
          orderKeys = _this$state.orderKeys,
          originKeyMapIndex = _this$state.originKeyMapIndex;
      var panes = [];
      var fieldWidths = new Array(orderKeys.length);
      var totalWidth = 0; // field-width

      _forEach(orderKeys, function (key) {
        var field = component.fields[originKeyMapIndex[key]];
        var isAutoSize = +field.width === 0;
        var width = isAutoSize ? autoSizeWidth : +field.width; // field is autoSize when width is 0/'0'

        totalWidth += isAutoSize ? autoSizeWidth : +field.width;
        fieldWidths.push( /*#__PURE__*/React.createElement("td", {
          style: {
            width: width,
            minWidth: width
          },
          align: "right",
          className: styles['dynamic-table-content-field-width-item'],
          key: field.fieldId
        }, /*#__PURE__*/React.createElement("span", null, isAutoSize ? 'auto' : width)));
      }); // field


      _forEach(component.fields, function (field) {
        var isAutoSize = +field.width === 0;
        panes.push( /*#__PURE__*/React.createElement(Pane, Object.assign({}, _this2.sortableResize, isAutoSize ? noResizable : {}, {
          size: {
            width: isAutoSize ? autoSizeWidth : +field.width,
            height: fieldHeight
          },
          key: field.fieldId,
          maxWidth: maxFieldWidth,
          className: styles['dynamic-table-content-field-item']
        }), /*#__PURE__*/React.createElement(Col, {
          onRemoveField: onRemoveField,
          pComponent: component,
          component: field,
          wrapperFieldComponent: _this2.wrapperFieldComponent,
          currentEditField: currentEditField
        })));
      }); // pagination


      var noPagination = component.pagination === false;
      var paginationProps = this.state.paginationProps;
      var currentPaginationProps = paginationProps;

      if (component.pagination) {
        // custom
        paginationProps.pageSize = component.defaultPageSize;
      }

      return /*#__PURE__*/React.createElement("div", {
        className: styles['dynamic-table'],
        style: noPagination ? dynamicTableStyleWithNoPagination : dynamicTableStyleWithPagination
      }, /*#__PURE__*/React.createElement(DrawDragComponent, {
        component: component,
        onAddField: onAddField,
        onAddComponent: onAddComponent,
        onActiveComponent: onActiveComponent,
        onSwapComponent: onSwapComponent,
        currentEditComponent: currentEditComponent,
        currentEditField: currentEditField,
        wrapperFieldComponent: this.wrapperFieldComponent
      }, /*#__PURE__*/React.createElement("div", {
        className: styles['dynamic-table-content']
      }, /*#__PURE__*/React.createElement("table", {
        className: styles['dynamic-table-content-field-width']
      }, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", {
        className: styles['dynamic-table-content-field-width-wrap']
      }, fieldWidths, /*#__PURE__*/React.createElement("td", {
        key: "placeholder"
      })), /*#__PURE__*/React.createElement("tr", {
        className: styles['dynamic-table-content-field-width-rule-bg']
      }))), /*#__PURE__*/React.createElement(SortablePane, Object.assign({}, this.getSortableResizeConfig(), {
        order: orderKeys,
        className: styles['dynamic-table-content-field'],
        style: {
          width: totalWidth,
          height: resizeLayoutHeight,
          minWidth: '100%'
        }
      }), panes)), /*#__PURE__*/React.createElement("div", {
        className: styles['dynamic-table-data']
      }, intl.get('cpfm.ui.dynamicTable.data').d('数据区域')), noPagination ? null : /*#__PURE__*/React.createElement("div", {
        className: styles['dynamic-table-pagination']
      }, /*#__PURE__*/React.createElement(Pagination, currentPaginationProps))));
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this$props2 = this.props,
          refRender = _this$props2.refRender,
          component = _this$props2.component;

      if (_isFunction(refRender)) {
        refRender(component.renderKey, this);
      }
    }
  }, {
    key: "orderChange",
    value: function orderChange(orderKeys) {
      this.setState({
        orderKeys: orderKeys
      });
    }
  }, {
    key: "changeViewWidthStart",
    value: function changeViewWidthStart(event, key) {
      var component = this.props.component;
      var originKeyMapIndex = this.state.originKeyMapIndex;
      var width = component.fields[originKeyMapIndex[key]].width;
      this.setState({
        originWidth: +width
      });
    }
  }, {
    key: "changeViewWidth",
    value: function changeViewWidth(event, key, dir, elementRef, delta) {
      var component = this.props.component;
      var originKeyMapIndex = this.state.originKeyMapIndex;
      var originWidth = this.state.originWidth;
      var _delta$width = delta.width,
          moveWidth = _delta$width === void 0 ? 0 : _delta$width;
      component.fields[originKeyMapIndex[key]].width = originWidth + (_isNaN(moveWidth) ? 0 : moveWidth); // 需要更新组件
      // todo remove this after complete

      this.forceUpdate();
    }
  }, {
    key: "changeViewWidthStop",
    value: function changeViewWidthStop() {
      this.setState({
        originWidth: 0
      });
    }
  }, {
    key: "getSortableResizeConfig",
    value: function getSortableResizeConfig() {
      if (!this.sortableResizeConfig) {
        this.sortableResizeConfig = {
          onResizeStart: this.changeViewWidthStart,
          onResize: this.changeViewWidth,
          onResizeStop: this.changeViewWidthStop,
          onOrderChange: this.orderChange,
          style: {
            height: resizeLayoutHeight
          }
        };
      }

      return this.sortableResizeConfig;
    }
  }, {
    key: "wrapperFieldComponent",
    value: function wrapperFieldComponent(fieldElement, field, fieldOptions) {
      var _this$props3 = this.props,
          component = _this$props3.component,
          onAddField = _this$props3.onAddField,
          onActiveField = _this$props3.onActiveField,
          onSwapField = _this$props3.onSwapField,
          currentEditField = _this$props3.currentEditField;
      return /*#__PURE__*/React.createElement(DropField, {
        pComponent: component,
        component: field,
        onSwapField: onSwapField,
        onAddField: onAddField,
        onActiveField: onActiveField,
        fieldOptions: fieldOptions,
        currentEditField: currentEditField
      }, fieldElement);
    }
  }], [{
    key: "getDerivedStateFromProps",
    value: function getDerivedStateFromProps(nextProps, prevState) {
      var component = nextProps.component;
      var prevRenderKey = prevState.prevRenderKey;

      if (component && prevRenderKey !== component.renderKey) {
        var originKeyMapIndex = {};

        var orderKeys = _map(component.fields, function (field, index) {
          originKeyMapIndex[field.fieldId] = index;
          return "".concat(field.fieldId);
        });

        return {
          prevRenderKey: component.renderKey,
          orderKeys: orderKeys,
          originKeyMapIndex: originKeyMapIndex
        };
      }

      return null;
    }
  }]);

  return DynamicTableRender;
}(React.Component);

export { DynamicTableRender as default };